<template>
  <a-card>
    <section class="filter-bar mb-16">
      <span class="label">服务商名称：</span>
      <a-input class="mr-24 w-300" allow-clear placeholder="请输入服务商简称或全称" v-model="name" @pressEnter="search" maxLength="50"/>
      <a-button type="primary" @click="search">查询</a-button>
      <a-button class="ml-8" @click="reset">重置</a-button>
      <a-button v-if="$permissionJudge('VendorSettled')" style="float: right" type="primary" icon="double-right"
                @click="$router.push({path:'/enter-supplier'})">入驻
      </a-button>
    </section>
    <a-table
      class="table-con"
      row-key="id"
      :loading="loading"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
    >
      <template #name="val,data">
        <p class="mb-0 name" style="max-width: 150px;">{{val}}</p>
        <a-tooltip placement="topLeft" :title="data.fullName">
          <p class="mb-0 full-name overflow" style="max-width: 150px;">{{data.fullName}}</p>
        </a-tooltip>
      </template>
      <template #contactPhone="val,data">
        <a-tooltip :title="data.contactName">
          <span class="contact-con overflow">
            {{data.contactName}}
          </span>
        </a-tooltip>
        <a-divider v-if="data.contactPhone" type="vertical"/>
        <a-tooltip :title="data.contactPhone">
          <span class="contact-con overflow">
            {{data.contactPhone}}
          </span>
        </a-tooltip>
        <a-divider v-if="data.contactEmail" type="vertical"/>
        <a-tooltip :title="data.contactEmail">
          <span class="contact-con overflow" style="max-width:120px">
            {{data.contactEmail}}
          </span>
        </a-tooltip>
      </template>
      <template #balanceAmount="val, data">
        <p class="mb-0 name">
          余额：{{data.balanceAmount}}
        </p>
        <p class="mb-0 full-name" style="text-align: center;">冻结：{{ data.frozenAmount }}
          <a-divider type="vertical"/>
          质量保证金：{{ data.creditAmount }}
        </p>
      </template>
			
			<template #contract="val,data">
			  <section class="enabled-con">
			    <a-switch checked-children="开" un-checked-children="关" :checked="data.openEContract"/>
			    <span class="enabled-mack" @click="setContract(data)"></span>
			  </section>
			</template>
      <template #isEnabled="val,data">
        <section class="enabled-con">
          <a-switch checked-children="开" un-checked-children="关" :checked="val"/>
          <span class="enabled-mack" @click="setEnabled(data)"></span>
        </section>
      </template>
      <template #action="val, data">
        <a @click.stop="$router.push({path:`/supplier-management-details/${data.id}`})" href="javascript:">详细信息</a>
        <!--<a class="ml-10" @click.stop="" href="javascript:">结算</a>-->
      </template>
    </a-table>
    <CreateOrEdit ref="createOrEdit" @upload="search"></CreateOrEdit>
  </a-card>
</template>
<script>
import {tableMixins} from '@/utils/mixins'
import {getPageVendorList, setVendorStatus,setEContract} from '@/api/vendor'
import {cloneDeep} from 'lodash'
import CreateOrEdit from './CreateOrEdit'

export default {
  name: 'SupplierManagement',
  mixins: [tableMixins],
  components: {CreateOrEdit},
  data() {
    return {
      loading: false,
      name: '',
      pageNum: 1,
      rowsNum: 10,
      columns: [
        {dataIndex: 'name', title: '服务商(车行)', width: 160, scopedSlots: {customRender: 'name'}, align: 'center'},
        {
          dataIndex: 'contactPhone',
          title: '联系方式',
          scopedSlots: {customRender: 'contactPhone'},
          width: 320,
          align: 'center'
        },
        {dataIndex: 'balanceAmount', title: '账户金额（元）', scopedSlots: {customRender: 'balanceAmount'}, align: 'center'},
        {dataIndex: 'createTime', title: '接入时间', align: 'center'},
		
		 {dataIndex: 'contract', title: '电子合同', scopedSlots: {customRender: 'contract'}, align: 'center'},
        {dataIndex: 'isEnabled', title: '是否启用', scopedSlots: {customRender: 'isEnabled'}, align: 'center'},
        {title: '操作', scopedSlots: {customRender: 'action'}, width: 110, align: 'center'}
      ],
      data: []
    }
  },
  created() {
    if (!this.$permissionJudge('SetVendorStatus')) this.columns = this.columns.filter(item => item.title !== '是否启用')
    this.getData()
  },
  methods: {
    cloneDeep,
    setEnabled(data) {
      this.$confirm({
        title: `请确认是否${data.isEnabled ? '停用' : '启用'}服务商`,
        content: data.isEnabled ? `请确定要停用【${data.name}】服务商吗？` : `请确定要启用【${data.name}】服务商吗？`,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          setVendorStatus({id: data.id, isEnabled: !data.isEnabled}).then(res => {
            this.$message.success('设置成功！')
            this.getData()
          })
        }
      })
    },
	setContract(data){
		this.$confirm({
		    title: `请确认是否${data.openEContract ? '停用' : '启用'}电子合同`,
		    content: data.openEContract ? `请确定要停用【${data.name}】电子合同吗？` : `请确定要启用【${data.name}】电子合同吗？`,
		    okText: '确定',
		    cancelText: '取消',
		    onOk: () => {
		      setEContract({id: data.id, openEContract: !data.openEContract}).then(res => {
		        this.$message.success('设置成功！')
		        this.getData()
		      })
		    }
		  })
		},
	
    search() {
      this.pageNum = 1
      this.getData()
    },
    reset() {
      this.name = ''
      this.search()
    },
    getData() {
      this.loading = true
      const {name, pageNum, rowsNum} = this
      getPageVendorList({
        search: name ? name.trim() : undefined, rowsNum, pageNum
      }).then(res => {
        this.loading = false
        const {items, rowCount} = res
        this.data = items
        this.total = rowCount
        this.total = rowCount
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.full-name {
  color: #999;
}

.contact-con {
  display: inline-block;
  max-width: 100px;
  vertical-align: top;
}

.table-con {
  /deep/ .ant-table-thead > tr > th, /deep/ .ant-table-tbody > tr > td {
    padding: 8px;
  }
}

.enabled-con {
  position: relative;

  .enabled-mack {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
}
</style>
